<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">

            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="小区*" prop="area">
                        <el-input v-model="form.area"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名*" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="手机号*" prop="phone">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证">
                <el-input v-model="form.idcard"></el-input>
            </el-form-item> 
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="家庭住址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号">
                <el-input v-model="form.carNum"></el-input>
            </el-form-item> 
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="是否健康">
                        <el-radio-group v-model="form.isHealthy">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="体温">
                <el-input-number v-model="form.temper" :min="34" :max="42" ></el-input-number>
            </el-form-item>   
                </el-col>
            </el-row>
            
            
                   
            <el-form-item label="有无重点疫区居住、履行、接触史" label-width="250px">
                <el-radio-group v-model="form.history">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">有</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.desc" rows="4" placeholder="请输入"></el-input>
            </el-form-item> 
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="quxiao">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
            area:'',
            name: '',
            phone:'',
            idcard:'',
            address:'',
            carNum:'',
            temper: undefined,
            isHealthy: 1,
            history:0,
            desc: ''
        },
        rules:{
            name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'change' }
          ],
          area: [
            { required: true, message: '请输入小区', trigger: 'blur' },
            { min: 1, max: 10, message: '请不要在10 个字', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度在11 个字之内', trigger: 'change' },
            
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    message: '请输入正确的手机号码',
                    trigger: 'change'
                }
            
            // { pattern:/1/,}
          ],
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs["form"].validate(
            (valid) => {//箭头函数
                if (valid) {//判断，校验通过，执行下面的代码
                    // alert('submit!');//例子，真正的代码是ajax请求
                    this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
                } else {//校验未通过，某一条件不满足
                    console.log('error submit!!');
                    return false;
                }
            });
      },
      quxiao(){
          history.go(-1)
      }
      
    }
  }
</script>